import { defineStore } from 'pinia'
import type { DefineComponent } from 'vue'
import LotteryList from '@/components/game/LotteryList.vue'
import LiveList from '@/components/game/LiveList.vue'
import SportList from '@/components/game/SportList.vue'
import ElectroList from '@/components/game/ElectroList.vue'
import { GAME_TYPE } from '@/types/game.types.ts'
import gameApi from '@/api/game'
import IconLottery from '@/assets/svgs/game/icon_lottery_off.svg'
import IconLive from '@/assets/svgs/game/icon_live_off.svg'
import IconSports from '@/assets/svgs/game/icon_sports_on.svg'
import IconElectro from '@/assets/svgs/game/icon_slots_on.svg'
import IconChess from '@/assets/svgs/game/icon_chess_off.svg'
import IconFish from '@/assets/svgs/game/icon_fish_off.svg'
import FreeImg from '@/assets/images/game/free.png'
import type { PlayPageQuery, PlayLotteryPageQuery } from '@/types/game.types'

interface GameTab {
  name: string
  type: GAME_TYPE
  component: Component
  freeIcon?: DefineComponent
  activeIcon: DefineComponent
  needGameOut: boolean
}

interface Tabs {
  active: number
}

export const useGameStore = defineStore('useGameStore', () => {
  const list: GameTab[] = [
    {
      name: '彩票',
      type: GAME_TYPE.lottery,
      component: LotteryList,
      activeIcon: IconLottery,
      needGameOut: true,
    },
    {
      name: '真人',
      type: GAME_TYPE.live,
      component: LiveList,
      activeIcon: IconLive,
      needGameOut: true,
    },
    {
      name: '体育',
      type: GAME_TYPE.sport,
      component: SportList,
      activeIcon: IconSports,
      needGameOut: true,
    },
    {
      name: '电子',
      type: GAME_TYPE.electro,
      component: ElectroList,
      activeIcon: IconElectro,
      needGameOut: false,
    },
    {
      name: '棋牌',
      component: ElectroList,
      type: GAME_TYPE.chess,
      activeIcon: IconChess,
      freeIcon: FreeImg,
      needGameOut: true,
    },
    {
      name: '捕鱼',
      type: GAME_TYPE.fish,
      component: ElectroList,
      activeIcon: IconFish,
      needGameOut: true,
    },
  ]
  const gameData = reactive<Tabs>({
    active: 0,
  })

  // 设置索引
  const setTabActive = (game: GAME_TYPE) => {
    gameData.active = list.findIndex((item) => item.type === game)
  }

  const toPlay = (query: PlayPageQuery | PlayLotteryPageQuery) => {
    const router = useRouter()
    query.from = query.from ?? window.location.pathname
    const path = query.type === GAME_TYPE.lottery ? '/game/playLottery' : '/game/play'
    router.push({ path, query })
  }

  const changeTab = async (index: number) => {
    return
    if (list[index].type === GAME_TYPE.chess) {
      const res = await gameApi.chessLogin()
      toPlay({ id: res.data.sg.id, type: GAME_TYPE.chess })
    }
  }

  return {
    gameData,
    list,
    changeTab,
    setTabActive,
    toPlay,
  }
})
